/*
 * Copyright 2011, Edmandie Orbase Samonte (edmandie.samonte@gmail.com)
 * ArcherCode Technologies
 *
 * Google Code 	: 	http://code.google.com/p/warntip-jquery-plugin/
 * BitBucket   	:	https://bitbucket.org/edmandiesamonte/warntip-jquery-warning-tooltip-plugin/wiki/Home
 * 
 * Open Source under BSD License 
 *
 * NOTES:
 *      - Call warnTip after window.load. This is needed for the element position to be finalized
 *      - For version 1.0, warnTips are always in the right of the element
 */

(function($){
    
        /*
         * ID Counter
         */
        $id = 0;
    $.fn.warnTip = function(args){
        var opt = {
            title : false,   //Title of the warnTip (default to false only for easy checking)
            message : false, //Message content of the warnTip (default to false only for easy checking)
            idPrefix : "wt_", //prefix for the id of the warnTip
            gap : 5,            //Gap between the warnTip and the right side of element
            fadeInTime:500,   //fade-in animation time
            fadeOutTime:500, //fade-out animation time
            warnClass: "wt-warn" //css class to be added to the provided element
        }
        
        //Mix-up the parameters and the settings
        $.extend(opt,args);
        
        return this.each(function(i){
            //If no title or message, don't do anything
            if(!opt.title && !opt.message) return;
            
			/*
			 * The element that will trigger the fade-out.
			 * It is either the '.title' (warnTip title) or 'p' (warnTip message)
			 */
            $close_handler = (opt.title) ? ".title" : "p";
            $e = $(this); //Short scripting
            $e.addClass("wt-warn");  //Add the provided warn class to the element
            
            /* Check if a warnTip for this element is already existing
             * If it exist, use it.
             */
            if($e.siblings('.wt-wrapper').length >0){
                $c = $e;
                $d = $e.siblings('.wt-wrapper')
                $e = $d.children('.inner');//Short scripting
                $e.children('.title')
                    .html('<span>'+opt.title+'</span>'); //Modify the title
                $e.children('p')
                    .html(opt.message); //Modify the message
                $d.css({
                        position: 'absolute',
                        'top' : $c.offset()['top'] - $d.outerHeight()/2 + $c.outerHeight()/2
                    });
                $(this).siblings('.wt-wrapper')
                    .fadeIn(opt.fadeInTime); //Show the warnTip
                return;
            }
            
            $cont = ""; //Just a content holder
            
            //Prepare the title
            if(opt.title)
                $cont += "<div class='title'><span>"+opt.title+"</span></div>";
            
            //Prepare the message
            if(opt.message)
                $cont += "<p>"+opt.message+"</p>";
            
            /*
             * Create the warnTop element with the idPrefix plus the warnTip ID counter.
             */
            $("<div id='"+opt.idPrefix + $id.toString() + "'class='wt-wrapper'><div class='inner'>"+$cont+"<div></div>")
                    .insertBefore($e) //Insert as a sibling of the element
                    .hide(); //Hide for awhile
            
            /*
             * Reload the appended element.
             * This is a must simply because jQuery can't get the height of the appended element
             * right after it is appended. So we must reload it before modifying the position which is affected
             * by its height
             */
            $('#'+opt.idPrefix + $id).css({
                position: 'absolute',
                'top' : $e.offset()['top'] - $('#'+opt.idPrefix + $id).outerHeight()/2 + $e.outerHeight()/2,
                'left' : $e.offset()['left'] + $e.outerWidth() +  parseInt(opt.gap)
            })
                .fadeIn(opt.fadeInTime) //Show the warnTip
                .children('.inner')         /* Just go             */
                .children($close_handler)   /* to the $close_handler child */
                .click(function(){  //Bind the fadeOut effect of the element on the onClick event of its title
                    $(this).parent()
                        .parent()
                        .fadeOut(opt.fadeOutTime)
                        .siblings($e)
                        .removeClass(opt.warnClass);//Remove the added class.
                });
            $id++; //Increment the warnTip ID counter for the next call
        });
    };
    
})(jQuery);